<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .main{
            width: 1200px;
            margin: 0 auto;
        }
        #goodsimg{
            width: 300px;
        }
        #price{
            font-size: 25px;
            color: red;
        }
    </style>
</head>
<body>
    <!-- 
        1. 点击商品跳转到商品详情页并将当前当前商品id传递到商品详情页
        2. 在商品详情页根据当前商品id请求商品详情数据
        3. 渲染请求到的商品详情数据
     -->
    <div class="main">
        <img src="" alt="" id="goodsimg">
        <p id="price"></p>
        <div class="attrList">

        </div>
    </div>
</body>
<script src="./js/request.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script>
    let productValue;
        // 获取路径参数id
    let id = location.search.split("=")[1];
    let getInfo = async ()=>{
        let res = await request("get",`https://demo26.crmeb.net/api/product/detail/${id}`);
        console.log(res.data)
        // 获取商品图片
        let src = res.data.storeInfo.image;
        console.log(src)
        $("#goodsimg").attr("src",src)
        $("#price").text("￥"+res.data.storeInfo.price)
        // 获取商品属性
        let productAttr = res.data.productAttr;
        // 获取商品属性值
        productValue = res.data.productValue;
        console.log(productAttr)
        renderAttr(productAttr)
    }
    getInfo();
    function renderAttr(productAttr){
        let html ="";
        productAttr.forEach(item=>{
          
            let divs =""
            item.attr_values.forEach(values=>{
                let div = `<div onClick='changeAttr("${values}")'>${values}</div>`
                divs += div;
            })
            let div = `
             <div>
                <div>${item.attr_name}:</div>
                 <div class='attr'>${divs}</div>
             </div>
            `
            html += div;
            });
            // console.log(html)
            $(".attrList").html(html)
    }
    function changeAttr(value){
        console.log(value)
        console.log(productValue)
        let price = productValue[value].price;
        console.log(price)
        $("#price").text(price)
        }
</script>
</html>